<template>
  <!-- todo-list 列表 -->
  <div class="todo-list">
    <todo-list-item
      v-for="item in todos"
      :key="item.id"
      :todo-item="item"
      @change-state="item.completed = $event.target.checked"
    />
  </div>
</template>

<script>
import todoListItem from './todo_list_item.vue'

export default {
  name: "todoList",
  components: {
    todoListItem
  },
  props: ["todos"]
}
</script>

<style scoped>
  /* todo-list 列表 */
  .todo-list {
    display: grid;
    row-gap: 14px;
  }
</style>